<template>
  <div>
    <Modal v-model="showDetail" title="活动详情" width="700">
      <div class="planning-details">
        <Row>
          <Col span="4">活动主题</Col>
          <Col span="10">{{formItem.activity_theme}}</Col>
        </Row>
        <Row>
          <Col span="4">活动目的</Col>
          <Col span="10">{{formItem.activity_objective}}</Col>
        </Row>
        <Row>
          <Col span="4">活动要求</Col>
          <Col span="10">{{formItem.activity_requirement}}</Col>
        </Row>
        <Row>
          <Col span="4">活动内容</Col>
          <Col span="10">{{formItem.activity_content}}</Col>
        </Row>
      </div>
      <div slot="footer">
        <Button  @click="cancel">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'ActivityDetail',
  props: {
    showDetail: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      formItem: {}
    }
  },
  methods: {
    cancel () {
      this.$emit('cancel')
    }
  },
  watch: {
    formData (val) {
      this.formItem = val
    }
  }
}
</script>

<style scoped>
.planning-details{
  font-size: 15px;
  line-height: 2.5em;
  text-align: center;
}
/deep/ .ivu-modal-header {
  border-bottom: none;
}

/deep/ .ivu-modal-footer {
  border-top: none;
}
</style>
